import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import Qt.labs.settings 1.1

import Neumorphism 1.3

ApplicationWindow {
    id: window

    width: 260
    height: 450
    visible: true

    property alias testButton: firstButton

    // 控制窗口
    Window {
        id: controlWindow
        width: 400
        height: 600
        title: "Neumorphism Effect Controller"
        visible: true
        
        color: window.palette.window
        
        ScrollView {
            anchors.fill: parent
            anchors.margins: 10
            
            ColumnLayout {
                width: controlWindow.width - 20
                spacing: 15
                
                // 标题
                Label {
                    Layout.fillWidth: true
                    text: "Shader Parameters Control"
                    font.pixelSize: 18
                    font.bold: true
                    color: window.palette.windowText
                    horizontalAlignment: Text.AlignHCenter
                }
                
                // Spread 控制
                GroupBox {
                    Layout.fillWidth: true
                    title: "Spread (光晕扩散)"
                    
                    ColumnLayout {
                        anchors.fill: parent
                        
                        RowLayout {
                            Layout.fillWidth: true
                            Label { 
                                text: "Value:"
                                color: window.palette.windowText
                            }
                            Label { 
                                text: spreadSlider.value.toFixed(1)
                                Layout.minimumWidth: 50
                                color: window.palette.windowText
                            }
                        }
                        
                        Slider {
                            id: spreadSlider
                            Layout.fillWidth: true
                            from: 0.5
                            to: 15.0
                            value: 7.0
                            stepSize: 0.1
                            
                            onValueChanged: {
                                if (window.testButton && window.testButton.background) {
                                    window.testButton.background.spread = value
                                }
                            }
                        }
                    }
                }
                
                // Pad 控制
                GroupBox {
                    Layout.fillWidth: true
                    title: "Pad (内边距)"
                    
                    ColumnLayout {
                        anchors.fill: parent
                        
                        RowLayout {
                            Layout.fillWidth: true
                            Label { 
                                text: "Value:"
                                color: window.palette.windowText
                            }
                            Label { 
                                text: padSlider.value.toFixed(1)
                                Layout.minimumWidth: 50
                                color: window.palette.windowText
                            }
                        }
                        
                        Slider {
                            id: padSlider
                            Layout.fillWidth: true
                            from: 0.0
                            to: 20.0
                            value: 7.0
                            stepSize: 0.1
                            
                            onValueChanged: {
                                if (window.testButton && window.testButton.background) {
                                    window.testButton.background.pad = value
                                }
                            }
                        }
                    }
                }
                
                // Blend 控制
                GroupBox {
                    Layout.fillWidth: true
                    title: "Blend (渐变范围)"
                    
                    ColumnLayout {
                        anchors.fill: parent
                        
                        RowLayout {
                            Layout.fillWidth: true
                            Label { 
                                text: "Value:"
                                color: window.palette.windowText
                            }
                            Label { 
                                text: blendSlider.value.toFixed(1)
                                Layout.minimumWidth: 50
                                color: window.palette.windowText
                            }
                        }
                        
                        Slider {
                            id: blendSlider
                            Layout.fillWidth: true
                            from: 1.0
                            to: 50.0
                            value: 15.0
                            stepSize: 0.1
                            
                            onValueChanged: {
                                if (window.testButton && window.testButton.background) {
                                    window.testButton.background.blend = value
                                }
                            }
                        }
                    }
                }
                
                // Angle 控制
                GroupBox {
                    Layout.fillWidth: true
                    title: "Angle (光照角度)"
                    
                    ColumnLayout {
                        anchors.fill: parent
                        
                        RowLayout {
                            Layout.fillWidth: true
                            Label { 
                                text: "Value:"
                                color: window.palette.windowText
                            }
                            Label { 
                                text: angleSlider.value.toFixed(0) + "°"
                                Layout.minimumWidth: 50
                                color: window.palette.windowText
                            }
                        }
                        
                        Slider {
                            id: angleSlider
                            Layout.fillWidth: true
                            from: 0
                            to: 360
                            value: 135
                            stepSize: 1
                            
                            onValueChanged: {
                                if (window.testButton && window.testButton.background) {
                                    window.testButton.background.angle = value
                                }
                            }
                        }
                    }
                }
                
                // Radius 控制
                GroupBox {
                    Layout.fillWidth: true
                    title: "Radius (圆角半径)"
                    
                    ColumnLayout {
                        anchors.fill: parent
                        
                        RowLayout {
                            Layout.fillWidth: true
                            Label { 
                                text: "Value:"
                                color: window.palette.windowText
                            }
                            Label { 
                                text: radiusSlider.value.toFixed(1)
                                Layout.minimumWidth: 50
                                color: window.palette.windowText
                            }
                        }
                        
                        Slider {
                            id: radiusSlider
                            Layout.fillWidth: true
                            from: 0.0
                            to: 25.0
                            value: 5.0
                            stepSize: 0.1
                            
                            onValueChanged: {
                                if (window.testButton && window.testButton.background) {
                                    window.testButton.background.radius = value
                                }
                            }
                        }
                    }
                }
                
                // Inward 控制
                GroupBox {
                    Layout.fillWidth: true
                    title: "Style (凹凸效果)"
                    
                    RowLayout {
                        anchors.fill: parent
                        
                        Label { 
                            text: "Inward:"
                            color: window.palette.windowText
                        }
                        Switch {
                            id: inwardSwitch
                            checked: false
                            onCheckedChanged: {
                                if (window.testButton && window.testButton.background) {
                                    window.testButton.background.inward = checked
                                }
                            }
                        }
                        Label { 
                            text: inwardSwitch.checked ? "凹陷" : "凸起"
                            color: window.palette.windowText
                        }
                    }
                }
                
                // 重置按钮
                Button {
                    Layout.fillWidth: true
                    text: "Reset to Default"
                    onClicked: {
                        spreadSlider.value = 7.0
                        padSlider.value = 7.0
                        blendSlider.value = 15.0
                        angleSlider.value = 135
                        radiusSlider.value = 5.0
                        inwardSwitch.checked = false
                    }
                }
                
                // 关闭按钮
                Button {
                    Layout.fillWidth: true
                    text: "Close Controller"
                    onClicked: controlWindow.visible = false
                }
            }
        }
    }


    palette {
        base: '#333'
        button: '#333'
        window: '#333'
        highlight: '#23a7f2'


        text: '#abb'
        windowText: '#abb'
        buttonText: '#abb'
        highlightedText: '#abb'
    }

    component ColorBtn: Button {
        width: 30; height: width; text: '-'
        property var highlight: "black";
        property var buttonText: "black";
        highlighted: true
        onClicked: {
            window.palette.base = highlight
            window.palette.button = highlight
            window.palette.window = highlight

            window.palette.text = buttonText
            window.palette.buttonText = buttonText
            window.palette.windowText = buttonText
        }
    }

    component VGrid: Grid {
        spacing: 10
        columns: 1; rows: -1
        horizontalItemAlignment: Qt.AlignHCenter
        Item {width: parent.width; height: 1}
    }

    Settings {
        id: settings
        fileName: 'config.conf'
        property alias wcolor: window.palette.window
        property alias wtcolor: window.palette.windowText
        property alias bcolor: window.palette.button
        property alias btcolor: window.palette.buttonText
        property alias cindex: swipView.currentIndex
    }

    Control {
        x: 5; y: window.height - height - 5; z: 3
        padding: 5
        contentItem: Row {
            ColorBtn { highlight: '#a3d4d6'; buttonText: '#515253' }
            ColorBtn { highlight: '#b0d0e9'; buttonText: '#515253' }
            ColorBtn { highlight: '#06d6a0'; buttonText: '#515253' }
            ColorBtn { highlight: '#d5b9ff'; buttonText: '#515253' }
            ColorBtn { highlight: '#515255'; buttonText: '#a4a5a6' }
            ColorBtn { highlight: '#edc9aa'; buttonText: '#515253' }
            ColorBtn { highlight: '#d1d2d3'; buttonText: '#545556' }
            ColorBtn { highlight: '#313233'; buttonText: '#a4a5a6' }
        }
    }

    SwipeView {
        id: swipView
        currentIndex: 0
        width: parent.width
        height: parent.height

        VGrid {
            spacing: 15

            Frame {
                Grid {
                    columns: 3
                    spacing: 10

                    Rectangle{
                        implicitHeight: firstButton.height
                        implicitWidth: firstButton.width
                        border.color: Qt.color("red")
                        border.width: 1
                        color: Qt.color("transparent")
                        Button {
                            id: firstButton
                            width: 55
                            height: width
                            text: "Normal"
                        }
                    }

                    Button {
                        width: 55
                        height: width
                        text: "High\n-light"
                        highlighted: true
                    }

                    Button {
                        width: 55
                        height: width
                        text: "Check\n-able"
                        checkable: true
                    }

                    Button {
                        width: 55
                        height: width
                        text: "Flat Btn"
                        flat: true
                    }

                    Button {
                        width: 40
                        height: width
                        text: "Disabled\nBtn"
                        enabled: false
                    }

                    Button {
                        width: 40
                        height: width
                        text: "Small"
                    }
                }
            }

            Button {
                width: parent.width - 20
                height: 45
                text: "Wide Checkable Button (Right-click first button to open controller)"
                checkable: true
                font.family: 'carlito'
            }

            Row {
                CheckBox {
                    text: "Check\nbox"
                    tristate: true
                    font.family: 'carlito'
                }

                Switch {
                    text: "Switch"
                    font.family: 'carlito'
                }
            }

            Row {
                RadioButton {
                    text: "Radio 1"
                    font.family: 'carlito'
                }

                RadioButton {
                    text: "Radio 2"
                    font.family: 'carlito'
                }
            }

            Row {
                spacing: 5

                Text {
                    height: parent.height
                    text: "Busy Indicator \u2192"
                    color: window.palette.windowText
                    verticalAlignment: Text.AlignVCenter
                    font { family: 'carlito' }
                }

                Control {
                    width: 50; height: 50

                    contentItem: BusyIndicator {
                        running: false
                        TapHandler { onTapped: parent.running ^= true }
                    }

                    background: Rectangle {
                        color: 'transparent'
                        border.color: window.palette.buttonText
                        opacity: 0.5
                        radius: 5
                    }
                }
            }
        }

        VGrid {
            spacing: 5

            Label { text: "Progress Bar" }
            ProgressBar {
                width: parent.width
                value: slider1.value
            }

            Label { text: "Slider" }
            Slider {
                id: slider1
                width: parent.width
                value: 0.3
            }

            Label { text: "RangeSlider" }
            RangeSlider { width: parent.width }

            Label { text: "SpinBox" }
            SpinBox { to: 10 }

            Label { text: "TextArea" }
            TextArea {
                width: parent.width - 20
                text: 'Simple example of \nTextArea.'
            }

            Label { text: "TextField" }
            TextField {
                width: parent.width - 20
                text: 'Example text field.'
            }
        }

        VGrid {
            Label { text: "Dial" }

            Dial {
                width: 100
                height: 100
            }

            Label { text: "Tumbler" }

            Tumbler {
                model: 40
                height: 75
                visibleItemCount: 3
            }

            Label { text: "ComboBox" }

            ComboBox {
                id: comboBox
                model: 40
                editable: true
            }
        }

        VGrid {
            Label { text: "Dial" }

            NeumorphismView {
                contentItem: TextEdit {
                    rightPadding: 5; leftPadding: 5
                    text: 'Made\nBy\nSMR'

                    font.pixelSize: 85
                    font.bold: true
                    font.letterSpacing: -0

                    color: window.palette.button

                    cursorDelegate: Component {
                        Item {
                            Rectangle {
                                y: parent.height - 10
                                width: 5; height: 5; radius: 5
                                color: window.palette.button
                            }
                        }
                    }
                }
            }
        }
    }
}
